<template>
  <view class="container">
    <view class="content">
      <view class="header">测量完成</view>
	   <view class="smile">
	          <image src="../../static/images/sad.jpg" style="height: 180rpx;width: 180rpx;"> </image>
		</view>
		<view class="white"></view>
       <view class="group" style="display: flex;align-items: flex-start;">
         <text class="font text1" style="margin-top: 5rpx;margin-left: 10rpx;">|  </text>
         <text class="font text2" style="margin-top: 5rpx;margin-left: 8rpx;">异常血压</text>
       </view>
	<view class="pressure">
				 <view class="vvv">
					 <text style="font-size: 48rpx;color: red;font-weight: bolder;">167</text>
				 <text style="font-size:12px;color:#808080;">高压</text>
				 </view>
					 <view class="vertical-line"></view>
				 <view class="vvv">
					 <text style="font-size: 48rpx;color: red;font-weight: bolder;">127</text>
				 <text style="font-size:12px;color:#808080;">低压</text>
				 </view>
					 <view class="vertical-line"></view>
				 <view class="vvv">
					 <text style="font-size: 48rpx;color: black;font-weight: bolder;">90</text>
				 <text style="font-size:12px;color:#808080;">心率</text>
				 </view>
		</view>
	</view>
</view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },

  methods: {},
};
</script>


<style>
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


.content {
  width: 80%;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20rpx;
  text-align: center;
}

.header {
	align-items: center;
  font-size: 45rpx;
  font-weight: bold;
  margin-top: 50rpx;
  margin-bottom: 50rpx;
}

.white{
	  background-color: #ffffff;
	  height: 60rpx;
}

.smile{
	align-items: center;
}


.group {
	background-color: red;
	width: 100%;
	height: 50rpx;
	justify-content: flex-start;

}

.font {
  font-size: 28rpx;
  font-family: Inter;
  
  color: #ffffff;
}
.text1 {
  color: #ffffff;
  font-weight: 800;
  line-height: 34rpx;
}
.pressure{
    display: flex;
	justify-content: center;
	width: 100%;
	flex-direction: row;
    align-items: center;
  }
  
  .vertical-line {
    height: 80rpx; /* 控制竖线的高度 */
    width: 2px; /* 控制竖线的宽度 */
    background-color: #CCCCCC;
    margin: 0 20rpx; 
  }
  
  .vvv{
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin-top: 20rpx;
	  margin-bottom: 20rpx;
	  margin-right: 40rpx;
	  margin-left: 40rpx;
  }
</style>


